<template>
  <div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
        width="40"
      >
      </el-table-column>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="type" label="类型" sortable></el-table-column>
      <el-table-column prop="name" label="品名" sortable></el-table-column>
      <el-table-column
        v-if="spotFlag"
        prop="instrument"
        label="合约"
        sortable
      ></el-table-column>
      <el-table-column prop="direction" label="方向" sortable></el-table-column>
      <el-table-column
        v-if="spotFlag"
        prop="max_volume"
        label="最大手数"
        sortable
      ></el-table-column>
      <el-table-column
        prop="max_amount"
        label="最大数量"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="spotFlag"
        prop="offset_flag"
        label="开/平"
        sortable
      ></el-table-column>
      <el-table-column
        prop="commodity_unit"
        label="单位"
        sortable
      ></el-table-column>
      <el-table-column prop="currency" label="币种" sortable></el-table-column>
      <el-table-column
        v-if="futureFlag"
        prop="brand"
        label="品牌"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="futureFlag"
        prop="origin"
        label="产地"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="futureFlag"
        prop="standard"
        label="规格"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="futureFlag"
        prop="attribute"
        label="主属性"
        sortable
      ></el-table-column>
      <el-table-column prop="remarks" label="备注" sortable></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" v-if="btn" @click="closeBtn()"
        >选择</el-button
      >
      <el-button type="primary" size="mini" v-if="btns" @click="closeBtn()"
        >关闭</el-button
      >
    </div>
  </div>
</template>
<script>
import { tradeInfo } from "@/api/url_info.js";
export default {
  //策略明细
  name: "spotFuturesHedging_M",
  props: ["strategyInfo", "closeValue"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      btn: true,
      btns: true,
      spotFlag: true,
      futureFlag: true
    };
  },
  created() {
    this.getData();
    if (this.closeValue == "check") {
      this.btn = false;
    } else {
      this.btns = false;
    }
  },
  methods: {
    async getData() {
      let that = this;
      let tableData = [];
      await tradeInfo({ strategy_id: that.strategyInfo.strategy_id })
        .then(res => {
          let data = res.result;
          for (let i = 0; i < data.length; i++) {
            tableData[i] = {
              commodity_unit:
                data[i]["commodity_unit"] == 0 ||
                data[i]["commodity_unit"] == 1 ||
                data[i]["commodity_unit"] == 2 ||
                data[i]["commodity_unit"] == 3 ||
                data[i]["commodity_unit"] == 4 ||
                data[i]["commodity_unit"] == 5
                  ? data[i]["name"].commodity_unit
                  : data[i]["commodity_unit"],
              created_time: data[i]["created_time"] || "",
              depart_name: data[i]["depart_name"] || "",
              currency: data[i]["currency"] || "",
              direction: data[i]["direction"] || "",
              instrument: data[i]["instrument"] || "",
              market: data[i]["market"] || "",
              max_amount: data[i]["max_amount"],
              loss_limit: data[i]["loss_limit"],
              max_volume:
                data[i]["trade_type"] == 1 ? "" : data[i]["max_volume"],
              name: data[i]["productName"] || data[i]["name"].name,
              offset_flag:
                data[i]["trade_type"] == 1 ? "" : data[i]["offset_flag"],
              reference_price: data[i]["reference_price"],
              remarks: data[i]["remarks"] || "",
              type: data[i]["type"] || "",
              trade_type: data[i]["trade_type"] || "",
              premium_received_paid: data[i]["premium_received_paid"],
              spare_value: data[i]["spare_value"] || "",
              strategy_id: data[i]["strategy_id"] || "",
              strategy_name: data[i]["strategy_name"] || "",
              matchable_amount: data[i]["matchable_amount"],
              matchable_volume: data[i]["matchable_volume"],
              id: data[i]["id"] || "",
              brand:
                data[i]["name"] != null
                  ? data[i]["name"].commodity_spot[0].brand
                  : "",
              origin:
                data[i]["name"] != null
                  ? data[i]["name"].commodity_spot[0].origin
                  : "",
              standard:
                data[i]["name"] != null
                  ? data[i]["name"].commodity_spot[0].standard
                  : "",
              attribute:
                data[i]["name"] != null
                  ? data[i]["name"].commodity_spot[0].attribute
                  : ""
            };
          }
          console.log("2222", tableData);
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
      that.tableData = tableData;
      let type = that.strategyInfo.strategy_type;
      if (type == "现货现货套期") {
        that.spotFlag = false;
      } else if (type == "期货期货套利") {
        that.futureFlag = false;
      } else if (type == "现货单边") {
        that.spotFlag = false;
      } else if (type == "期货单边") {
        that.futureFlag = false;
      } else if (type == "现货场外期权套期") {
        that.futureFlag = false;
      }
    },
    //选中的一行数据
    handleSelectionChange(val) {
      console.log("999", val);
      this.multipleSelection = val;
    },
    //禁选
    checkSelectable(row) {
      if (this.closeValue == "tactics") {
        return row.type == "期货";
      } else if (this.closeValue == "optionMatch_E") {
        return row.type == "期权";
      } else if (
        this.closeValue == "spotMatch_E" ||
        this.closeValue == "overOptionMatch_E"
      ) {
        return row.type == "现货";
      } else if (this.closeValue == "TypeBiome") {
        return true;
      }
    },
    closeBtn() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: "只能选择一条明细",
          type: "warning"
        });
      } else {
        this.$emit("closeMoule", this.multipleSelection);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 2% 0 0 90%;
}
</style>
